<template>
  <div class="home-box">
    <!-- 首页分类列表 start -->
    <div v-for="item in types" :key="item.typeId">
      <div class="list-name">
        <span>{{ item.typeName }}</span>
        <router-link tag="span" :to="{
          path:'/films',
          query:{
            typeId:item.typeId,
            typeName:item.typeName
          }
        }" class="list-more">更多 > </router-link>
      </div>
      <!-- 电影展示组件 start -->
      <film-list :films="item.list" class="list-content"></film-list>
      <!-- 电影展示组件 end -->
    </div>
    <!-- 首页分类列表 end -->
  </div>
</template>

<script>
import FilmList from '../components/FilmList'

export default {
    data(){
        return {
            types:[]
        }
    },
    components:{
      FilmList,
    },
    created() {
        this.loadHomeData()
    },
    methods: {
        loadHomeData(){
            this.$api.loadTypes()
                .then(res => {
                    // console.log(res);
                    this.types = res
                })
                .then(() => {
                    // 循环多次向后台发送请求，获取每种分类对应的电影信息
                    for(const type of this.types){
                        this.$api.loadFilmsByParams({
                            size:6,
                            typeId:type.typeId
                        }).then(res => {
                            // console.log(res);
                            // 为每种分类添加对应的电影数据，其实就是为对象添加一个list属性
                            this.$set(type,'list',res)
                        })
                    }
                })
        }
    },
};
</script>

<style lang="less">
.film-img{
    img{
        width: 100%;
        height: 100%;
    }
}
</style>